<template>
    <div>
        <Modal width="600" v-model="materialUploadFlag"
               @on-ok="materialUploadFlag = false,coursemodal.materialFlag = true"
               @on-cancel="materialUploadFlag = false,coursemodal.materialFlag = true"
               :styles="{top: '200px'}" title="视频上传">
            <Upload
                    multiple
                    type="drag"
                    paste
                    :data="{'courseId':coursemodal.courseId}"
                    :headers="Authorization"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                            application/vnd.openxmlformats-officedocument.presentationml.slideshow,
                            application/vnd.openxmlformats-officedocument.presentationml.presentation,
                            application/vnd.openxmlformats-officedocument.wordprocessingml.document,
                            application/msword,application/vnd.ms-powerpoint,application/vnd.ms-excel"
                    :before-upload="beforeupload"
                    :format="['docx','doc','ppt','pptx','xls','xlsx']"
                    :on-format-error="handleFormatError"
                    :on-success="uploadVideoSuccess"
                    action="/api/backstage/mycourse/uploadMaterial">
                <div style="padding: 20px">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>资料上传（可批量批量上传，按住Ctrl键在点击上传文件可进行批量选着，也可在文件夹批量选中然后拖拽在框内）</p>
                </div>
            </Upload>
        </Modal>
        <Modal width="800"
               v-model="coursemodal.materialFlag"
               @on-ok="coursemodal.materialFlag = false,$parent.modal.courseware = true"
               @on-cancel="coursemodal.materialFlag = false,$parent.modal.courseware = true"
               :styles="{top: '100px'}"
               title="视频管理">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Button type="info" style="margin-bottom: 10px" @click="materialUploadFlag = true,coursemodal.materialFlag = false">上传资料</Button>
                <Table border :columns="materialColumns" :data="materialList">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="">编辑</Button>
                        <Button type="error" size="small" style="margin-right: 5px" @click="">删除</Button>
                        <Button type="success" size="small" @click="">预览</Button>
                    </template>
                </Table>
            </div>
        </Modal>
    </div>
</template>

<script>
    import jscookie from "js-cookie";
    export default {
        props:{
            coursemodal:{
                courseId:null,
                materialFlag:false
            }
        },
        data(){
            return{
                Authorization:{AuthorizationNotes:null},
                materialUploadFlag:false,
                materialList:[],
                materialColumns:[
                    {
                        title: '视频名称',
                        key: 'resourceTitle'
                    },
                    {
                        title: '资料地址',
                        key: 'resourceUrl'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ]
            }
        },
        methods:{
            /**
             * 文件上传前配置请求头以及cookie信息
             */
            beforeupload(){
                let time = new Date();
                this.Authorization.AuthorizationNotes = time.getTime()
                let token = sessionStorage.getItem("token")
                jscookie.set("token",token)
                return true;
            },
            uploadVideoSuccess(val){

            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件类型出错',
                    desc: '只支持\'docx\',\'doc\',\'ppt\',\'pptx\',\'xls\',\'xlsx\''
                });
            },
            getMaterialList(){
                this.http.post("/mycourse/getMaterialList",this.qs.stringify({"courseId":this.coursemodal.courseId})).
                then(res=>{
                    if(res.data){
                        this.materialList = res.data
                    }
                })
            }
        },
        watch:{
            'coursemodal.materialFlag'(val){
                if(val){
                    this.getMaterialList();
                }
            }
        }
    }
</script>

<style scoped>

</style>